﻿@page "/pivot-table/default-functionalities"

@using Syncfusion.Blazor.PivotView
@inherits SampleBaseComponent;
@using BlazorDemos
@using ej2_blazor_productdetails

<SampleDescription>
    <p>This <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-pivot-table'>Blazor Pivot Table</a> example demonstrates basic rendering of the pivot table with drill-up and drill-down functionality bound to a relational report.</p>
</SampleDescription>
<ActionDescription>
   <p>The pivot table is an easily configurable, presentation-quality business control used for visualizing relational
        data sources in cross-tabular format. It is displayed with drill-up and drill-down capabilities and allows users to
        easily aggregate data. Sorting, filtering, and grouping data are also supported.</p>
    <p>In this demo, the pivot table is populated with its minimum default settings.</p>
    <p>More information on the Blazor Pivot Table can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/pivot-table/getting-started/'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div class="content-wrapper">
        <SfPivotView TValue="PivotProductDetails" Height="340" EnableValueSorting=true>
            <PivotViewDataSourceSettings DataSource="@Data" ExpandAll=false EnableSorting=true>
                <PivotViewColumns>
                    <PivotViewColumn Name="Year"></PivotViewColumn>
                    <PivotViewColumn Name="Quarter"></PivotViewColumn>
                </PivotViewColumns>
                <PivotViewRows>
                    <PivotViewRow Name="Country"></PivotViewRow>
                    <PivotViewRow Name="Products"></PivotViewRow>
                </PivotViewRows>
                <PivotViewValues>
                    <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
                    <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
                </PivotViewValues>
                <PivotViewFormatSettings>
                    <PivotViewFormatSetting Name="Amount" Format="C0" UseGrouping=true></PivotViewFormatSetting>
                </PivotViewFormatSettings>
            </PivotViewDataSourceSettings>
            <PivotViewGridSettings ColumnWidth="120"></PivotViewGridSettings>
        </SfPivotView>
    </div>
</div>

<style>
    .e-pivotview {
        min-height: 200px;
    }
</style>

@code{

    public List<PivotProductDetails> Data { get; set; }

    protected override void OnInitialized()
    {
        this.Data = PivotProductDetails.GetProductData();
    }

}